<template>
	<view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">
		<scroll-view class="warp" scroll-y>
			<c-gap height="100rpx"/>
			<image class="logo_img" :src="$c.config.media + 'yeye/heart.png'" mode=""></image>
			<c-gap height="20rpx" />
			<view class="join_desc_text">介绍</view>
			<image class="join_desc" :src="$c.config.media + 'yeye/join_desc111.png'" mode=""></image>
			<c-gap height="20rpx" />
			<view class="maidian">
				<view class="item">
					<image class="join_desc" :src="$c.config.media + 'yeye/zhenshi.png'" mode=""></image>
					<view class="text">真实</view>
				</view>
				<view class="item">
					<image class="join_desc" :src="$c.config.media + 'yeye/gaoduan.png'" mode=""></image>
					<view class="text">高端</view>
				</view>
				<view class="item">
					<image class="join_desc" :src="$c.config.media + 'yeye/xinlai.png'" mode=""></image>
					<view class="text">信赖</view>
				</view>
				<view class="item">
					<image class="join_desc" :src="$c.config.media + 'yeye/quanwei.png'" mode=""></image>
					<view class="text">权威</view>
				</view>
			</view>
			<c-gap height="20rpx" />
			<view class="join-jieshao-warp">
				<view class="join-jieshao">声明</view>
				<view class="join-content">
					<view>1.app致力于打造100%真实健康的平台；女性用户采用人脸识别认证，照片即真人！保证用户质量以及真实性。</view>
					<view>2.为过滤非诚意用户,避免微商、酒托、广告等骚扰，打造 纯净私密的空间，保证产品持续稳定运营。需支付 一定费用，即可永久加入</view>
					<view>3.保证绿色约会，绝不参加赌博等违法行为。</view>
					<view>4.请务必确定您已满18岁，否则请勿参加。</view>
				</view>
			</view>
		</scroll-view>
		<view style="padding: 30rpx 0;">
			<view class="join-btn" @tap="joinShow">立即加入</view>
		</view>

		<uni-popup ref="pay" type="bottom">
			<view class="pay-wrap">
				<view class="pay-title">支付</view>
				<view class="pay-why-title">为什么要付费？</view>
				<view class="pay-why-content">为过滤非诚意用户,避免微商、酒托、广告等骚扰，打造 纯净私密的空间，保证产品持续稳定运营。需支付 一定费用，即可永久加入</view>
				<view class="pay-tips">如遇支付问题，请联系客服解决</view>
				<view class="pay-money">￥{{ configData.price }}/永久</view>
				<view class="pay-project">支付总额</view>
				<view class="maidiankaitong">
					<view class="item" @tap="wxPay" v-if="weixin_flag==1">
						<image class="join_desc" :src="$c.config.imageIP + 'yuemini/ic_wechat2.png'" mode=""></image>
					</view>
					<view class="item" @tap="aliPay" v-if="zhifubao_flag==1">
						<image class="join_desc" :src="$c.config.imageIP + 'yuemini/ic_alipay2.png'" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import CGap from '@/components/c-gap.vue';

	export default {
		components: {
			CGap
		},
		data() {
			return {
				$c: this.$c,
				projectId: 1,
				type: 1,
				zhifubao_flag: 0,
				weixin_flag: 0,
				configData: {
					price: 20
				},
				postParam: {
					type: 3,
					userId: '',
					price: '28.00',
					projectId: '4',
					appId: 'wxff095378edaf00da',
				},
				param: {
					pay_type: 5,
					user_id: '',
					package_id: 3,
					vip_package_id: 4,
					code: '',
					promoter_user_id: ''
				}
			};
		},
		async onLoad() {
			this.zhifubao_flag = uni.getStorageSync('isaliPay');
			this.weixin_flag = uni.getStorageSync('isWxpay');
			this.mempiaomoney();
		},
		onShow() {
			this.menpiao();
		},
		methods: {
			//门票价格
			async mempiaomoney() {
				let res = await this.$c.post("/app/tickPrice/info")
				if (res.code == 0) {
					if (res.data.price) {
						this.configData.price = res.data.price;
					}
					this.projectId = res.data.id;
				}
			},

			async menpiao() {
				let res = await this.$c.post("/app/tickUserInfo/info")
				if (res.code == 0) {
					uni.setStorageSync('isTicket', res.data.windowTicket);
					if (res.data.windowTicket == 1) {
						uni.switchTab({
							url:'/pages/m-pages/m-personnelList/index'
						})
						// this.$c.jump('/pages/m-pages/m-personnelList/index', 3);
					}
				}
			},


			async getUserInfo() {
				// 是会员  或者 已经购买门票
				let res = await this.$c.post('/apa/user/myUserInfo', {}, {}, false);
				let userInfo = res.data.userInfo;
				this.postParam.userId = userInfo.id;
				console.log(userInfo);
			},
			joinShow() {
				this.$refs.pay.open();
			},
			//微信支付
			async wxPay() {
				this.type = 3;
				let url = "/api/wechatVersion3/rechargeH5?type=" + this.type + "&projectId=" + this.projectId
				let res = await this.$c.post(url)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
				const webview = plus.webview.create('', 'custom-webview');
				webview.loadURL(res.data.payUrl, {
					'Referer': 'http://mall.ptszy.com://',
				});
			},
			//支付宝支付
			async aliPay() {
				this.type = 3;
				let url = "/api/aliPayVersion3/transactionsH5?type=" + this.type + "&projectId=" + this.projectId
				let res = await this.$c.post(url)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
				getApp().globalData.webviewUrl = res.data.payUrl
				uni.navigateTo({ url: '/pages/webview/webview'});
				// plus.runtime.openURL(res.data.payUrl, function(err) {
				// 	uni.showToast({
				// 		title: JSON.stringify(err),
				// 		duration: 8000
				// 	})
				// });
			}
		}
	};
</script>

<style lang="scss">
	.content {
		flex-direction: column;
		display: flex;
		width: 750rpx;
		height: 100vh;
		background-size: 750rpx 100vh;
		background-position: 0 0;

		.warp {
			width: 702rpx;
			margin: 0 auto;
			flex: 1;
			overflow-y: auto;
			box-sizing: border-box;

			.logo_img {
				margin: 0 auto;
				display: block;
				width: 428rpx;
				height: 390rpx;
			}

			.join_desc_text {
				margin: 0 auto;
				width: 200rpx;
				height: 44rpx;
				font-weight: 600;
				text-shadow: 0px 10px 24px rgba(247, 195, 138, 0.21);
				font-size: 32rpx;
				color: #ff1c77;
			}

			.join_desc {
				margin: 0 auto;
				display: block;
				width: 310rpx;
				height: 18rpx;
			}

			.maidian {
				margin: 0 auto;
				width: 650rpx;
				display: flex;
				justify-content: space-between;

				.item {
					image {
						display: block;
						width: 90rpx;
						height: 90rpx;
					}

					.text {
						text-align: center;
						width: 90rpx;
						height: 50rpx;
						font-size: 24rpx;
						line-height: 50rpx;
						color: #848484;
					}
				}
			}

			.join-jieshao-warp {
				background: #fff;
				width: 702rpx;
				border-radius: 20rpx;
				margin: 0 auto;
				padding: 0rpx 28rpx 20rpx;
				box-sizing: border-box;

				.join-jieshao {
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
					padding: 20rpx 28rpx;
					box-sizing: border-box;
				}

				.join-content {
					font-size: 24rpx;
					font-weight: 400;
					color: #B3B3B3;
					line-height: 44rpx;
				}
			}
		}

		.join-btn {
			width: 560rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			border-radius: 100rpx;
			margin: 0 auto;
			background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
			font-size: 32rpx;
			font-weight: 550;
		}

		.pay-wrap {
			background-color: #fff;
			text-align: center;
			// color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding-bottom: 110rpx;
		}

		.pay-title {
			padding: 32rpx 0 60rpx;
		}

		.pay-tips,
		.pay-project {
			color: #848484;
		}

		.pay-money {
			font-size: 50rpx;
			padding: 20rpx 0;
			color: #FF185E;
		}

		.maidiankaitong {
			margin: 0 auto;
			width: 400rpx;
			display: flex;
			justify-content: space-between;

			.item {
				image {
					display: block;
					width: 95rpx;
					height: 95rpx;
				}

				.text {
					text-align: center;
					width: 90rpx;
					height: 50rpx;
					font-size: 24rpx;

					line-height: 50rpx;
				}
			}
		}

		.vip-kaitong {

			//margin: 0 auto;
			width: 552rpx;
			height: 100rpx;
			background-color: #ff1c77;
			justify-content: space-between;
			// width: 552rpx;
			// height: 120rpx;
			// background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
			// border-radius: 60rpx;
			// line-height: 120rpx;
			//text-align: center;
			// font-size: 32rpx;
			// color: #ffffff;

		}

		// .wx-pay{
		// 	background-color: #FFE6BA;
		// }
		// .ail-pay
		// {
		// 	background-color: #FFE6BA;
		// }

		.pay-why-title {
			text-align: left;
			font-weight: 600;
			// color: #848484;
			line-height: 44rpx;
			padding: 0 28rpx;
		}

		.pay-why-content {
			text-align: left;
			font-size: 28rpx;
			color: #848484;
			;
			line-height: 40rpx;
			padding: 40rpx 28rpx;
		}


	}
</style>